<template>
    <div class="spe-agr">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">特别约定</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <group>
            <div v-for="(item,index) in tprptEngageDTOList" :key="index" class="spe-border">
                <cell :border-intent="false" :arrow-direction="item.direction ? 'up' : 'down'" @click.native="item.direction = !item.direction" is-link>
                    <div @click="setItemIcon(index)" slot="after-title">
                        <i v-show="item.seleFlage" class="weui-icon weui_icon_success weui-icon-success"></i>
                        <i v-show="!item.seleFlage" class="weui-icon weui_icon_circle weui-icon-circle"></i>
                        {{item.clausesName}}
                    </div>

                    <div slot="default">{{item.clauseCode}}&nbsp</div>
                </cell>
                <template v-if="item.direction">

                    <x-textarea :readonly="item.updateFlag=='1'" v-model="item.clausesContext" autosize>

                    </x-textarea>

                </template>
            </div>
        </group>

    </div>
</template>

<script>
import {
    XHeader,
    Group,
    Cell,
    XTextarea,
    CheckIcon
} from "vux";
import {
    Car_Mutations,
    RouteUrl
} from "src/common/const";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        XHeader,
        Group,
        Cell,
        XTextarea,
        CheckIcon
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        carAddr: "carAddr",
        shareData: "shareData",
        initIndexData: "initIndexData",
        car: "car"
    }),
    data() {
        return {
            tprptEngageDTOList: [],
        };
    },
    watch: {
    },
    filters: {
    },
    methods: {
        setItemIcon(index) {
            let flage = this.tprptEngageDTOList[index].seleFlage;
            if (this.tprptEngageDTOList[index].mustFlag != "0") {
                flage = !flage;
            }
            this.tprptEngageDTOList[index].seleFlage = flage;
        },
        onClick() {

        },
        goCarOffer() {
        },
        goBack() {
            this.$common.goUrl(this, RouteUrl.OFFER_RESULT);
        },
        saveData() {
            this.$common.storeCommit(this, Car_Mutations.SAVE_SPECIAL_AGREEMENT, this);
        },
        setData() {
            this.$common.storeCommit(this, Car_Mutations.SET_SPECIAL_AGREEMENT, this);
        }
    },
    beforeRouteEnter(to, from, next) {
        next();
    },
    beforeMount() {
    },
    beforeDestroy() {
        if (sessionStorage["CAR_FORM_URL"] != "/") {
            this.saveData();
        }
    },
    mounted() {
        if (sessionStorage["CAR_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.CAR_INSURE);
            return;
        }
        document.title = '特别约定';
        this.$init.subPageInit(this);
        this.setData();

    }

}
</script>

<style scoped  lang="scss">
.spe-border {
  border-top: 1px solid #EEEE;
}
</style>
